<template>
	<view class="indent">
		<view class="nav">
			<u-sticky bgColor="#fff">
				<u-tabs 
				    :list="list1" 
					lineColor='#1667D2'
					lineWidth='40'
					:activeStyle="{
				 				color: '#1667D2',
				 				fontWeight: 'bold',
				 				transform: 'scale(1.05)'
				 	}"
					itemStyle="justify-content:space-between;height:50px;width:70px"
				></u-tabs>
			</u-sticky>
		</view>
		<view class="content" v-for="(item,index) in product" :key="productId">
			<view class="obligation">
				<view class="">
					<text class="obligation_text1">{{item.obligation}}</text>
					<text class="obligation_text2">{{item.readPay}}</text>
				</view>
				
			</view>
			<navigator url="../../pages2/detailedOrders/detailedOrders">
			<view class="detail">
				<view class="detail_content">
				<image :src="item.img" mode="" style="width: 216rpx; height: 164rpx; border-radius: 30rpx;"></image>
				
				<view class="detail_text">
					<text>{{item.name}}</text>
					<p>入住时间：{{item.time}}</p>
					<p>订单时间：{{item.odertime}}</p>
				</view>
				
				</view>
			</view>
			</navigator>
			<view class="money">
				<p>总计￥{{item.money}}</p>
			</view>
			<view class="option">
				<span v-show="item.observe1"><a href="#">{{item.cancel}}</a></span>
			
				<span v-show="item.observe2" style="border: 4rpx solid #ffaa00; color: #F0AD4E;">
						<navigator url="../../pages2/confirmorder/confirmorder">	
				<a href="#">{{item.pay}}</a>
						</navigator>
				</span>
			
				
				<span v-show="item.observe3" ><a href="#">{{item.alread}}</a></span>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '全部',
				}, {
					name: '待付款',
				}, {
					name: '已付款'
				}, {
					name: '已完成'
				}],
				
				// uni.navigateTo({
				// 				url:'页面路径?id=1'
				// 			  		})
				
				product:[
					{
						obligation:'待付款',
						readPay:'',
						img:('https://www.zhuinw.com/uploads/20210816/ef73469fd86f19ac1fba0b540502c42f.jpg'),
						name:'泰康之家·大清谷',
						time:'3月24日至3月26日',
						odertime:'2022/3/20 12:00',
						money:1500,
						alread:'',
						cancel:'取消订单',
						pay:'支付订单',
						observe1:true,
						observe2:true,
						observe3:false,
					},
					{
						obligation:'',
						readPay:'已完成',
						img:('https://www.zhuinw.com/uploads/20210719/9eecaa4eebd1efadc3d2282dcdd58c18.jpg'),
						name:'上海云栖兰亭养老社区',
						time:'3月24日至3月26日',
						odertime:'2022/3/20 12:00',
						money:1200,
						alread:'支付完成',
						observe1:false,
						observe2:false,
						observe3:true,
					}
				]
			}
		},
		
		methods: {
			click(item) {
				console.log('item', item);
			}
		}
	}
</script>

<style lang="scss" scoped>
.indent{
	background-color: #f9f9f9;
	.nav{
		padding: 20rpx 10rpx;
		/deep/ .u-tabs__wrapper__nav{
			justify-content: space-between;
		}
		/deep/ .u-tabs__wrapper__nav__item__text{
			width: 100%;
			text-align: center;
		}
	}
	.content{
		background-color: #ffffff;
		margin-top: 10rpx;
		border-top: 1px solid #f3f3f3;
		border-bottom: 1px solid #f3f3f3;
		width: 100%;
		height: 460rpx;
		margin-bottom: 50rpx;
		
	}
	.obligation{
		height: 80rpx;
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
	.obligation_text1{
		margin-right: 20rpx;
		color: #FF9800;
		line-height: 80rpx;
	}
	.obligation_text2{                      //付款状态
		margin-right: 20rpx;
		color: #ababab;
		line-height: 80rpx;
	}
	.detail{
		height:100%;
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
	.detail_content{
		width: 95%;
		height:100%;
		display: flex;
		padding-top:5%;
		border-top: 2rpx solid #f3f3f3;
	}
		
	.detail_text{
		margin-left: 50rpx;
		border-bottom: 2rpx solid #f3f3f3;
		width: 70%;
	}
	.detail_text text{
		font-weight: 1000;
		font-size: 32rpx;
	}
	.detail_text p{
		font-size: 28rpx;
		color: #999999;
		margin-top: 18rpx;
	}
	.money{
		height: 80rpx;
		display: flex;
		justify-content: flex-end;
		margin-right: 20rpx;
		line-height: 80rpx;
		font-size: 32rpx;
	}
	.money p{
		color: #1c222a;
	}
	.option{
		display: flex;
		justify-content: flex-end;
	}
	.option span{
		font-size: 32rpx;
		width: 160rpx;
		height: 60rpx;
		border: 4rpx solid #f3f3f3;
		text-align: center;
		line-height:60rpx;
		border-radius: 15rpx;
		margin-right: 18rpx;
	}
}

</style>
